<template>
  <view class="quntuanDetailPage">
    <head-box></head-box>
    <view class="quntuanDetailPage-swiper">
      <view class="uni-padding-wrap">
        <view class="page-section swiper">
          <view class="page-section-spacing">
            <swiper
              class="swiper"
              indicator-dots
              indicator-active-color="#FFFFFF"
              circular
              :autoplay="false"
              :interval="5000"
              :duration="500"
            >
              <swiper-item>
                <view class="swiper-item"
                  ><image class="_item-img" :src="info.gpinfoPic" mode=""></image
                ></view>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
    </view>
    <view class="quntuanDetailPage-main quntuanDetailPage-main-radius">
      <view class="quntuanDetailPage-main-box">
        <view class="quntuanDetailPage-main-box-title"
          ><image class="_logo" :src="info.gpinfoLogo" mode="aspectFit"></image
          >{{ info.gpinfoName }}</view
        >
        <view class="quntuanDetailPage-main-box-info">
          <view class="quntuanDetailPage-main-box-info-label">地址：</view>
          <view class="quntuanDetailPage-main-box-info-val">{{ info.gpinfoAddress }}</view>
        </view>
        <view class="quntuanDetailPage-main-box-info">
          <view class="quntuanDetailPage-main-box-info-label">电话：</view>
          <view class="quntuanDetailPage-main-box-info-val">{{ info.gpinfoPhone }}</view>
        </view>
      </view>
    </view>
    <view class="quntuanDetailPage-main" style="display: none">
      <view class="quntuanDetailPage-main-box">
        <view class="quntuanDetailPage-main-box-logoBox">
          <view class="quntuanDetailPage-main-box-logoBox-item"
            ><image class="_logo" :src="info.gpinfoLogo" mode="aspectFit"></image
          ></view>
        </view>
      </view>
    </view>
    <view class="quntuanDetailPage-main tab-botton">
      <view class="quntuanDetailPage-main-header"><text class="_header-text">简介</text></view>
      <view class="quntuanDetailPage-main-box">
        <view class="quntuanDetailPage-main-box-win">
          <view class="quntuanDetailPage-main-box-win-box">
            <view class="quntuanDetailPage-main-box-detail">
              <rich-text type="text" :class="boxjj" :nodes="infoHtml" @tap="onShowInfoHtml"></rich-text>
            </view>
            <!--						<view class="quntuanbox1"  @tap="showjj">-->
            <!--							<image src="../../static/img/jjcon.png" mode="aspectFit"></image>-->
            <!--						</view>-->
          </view>
          <view class="btnlist">
            <view
              v-if="info.gpinfoUrl !== 'phone' && info.gpinfoUrl !== ''"
              class="wantAdd"
              @tap="$api.handleMenu('/pages/webview/webview?url=' + info.gpinfoUrl)"
              >个人入群</view
            >
            <view
              v-if="info.gpinfoUrl === 'phone'"
              class="wantAdd"
              @tap="$api.makePhoneCall(info.gpinfoPhone)"
              >个人入群</view
            >
            <view
              class="wantAdd"
              v-if="info.gpinfoHidden === 2"
              @tap="$api.handleMenu('/pages/alliance/alliance')"
              >单位建群</view>
          </view>
        </view>
      </view>
    </view>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
  var graceRichText = require('../../static/richText.js')
  import {gpGpinfo} from '@/api/group'
  export default {
    data() {
      return {
        id: null,
        info: {},
        infoHtml: '',
        boxjj: 'boxjj',
      }
    },
    onLoad(options) {
      this.id = options.id
     this.gpGpinfo(this.id)
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    methods: {
      //详情数据
      async gpGpinfo(id){
        const {code,result} = await gpGpinfo(id)
        if (code == 200) {
          this.info = result
          const {gpinfoPic,gpinfoLogo} = this.info
          this.info.gpinfoPic = this.$api.getImgUrl(gpinfoPic)
          this.info.gpinfoLogo = this.$api.getImgUrl(gpinfoLogo)
          // 强化 richText
          this.infoHtml = graceRichText.format(
              '<p>' + this.info.gpinfoIntroduce.replace('\n', '</p><p>') + '</p>'
          )
        }
      },
      //展示富文本内容的操作
      onShowInfoHtml() {
        if (this.boxjj != '') this.boxjj = ''
      },
    },
  }
</script>

<style lang="scss">
  .boxjj {
    //display: -webkit-box;
    //-webkit-box-orient: vertical;
    //-webkit-line-clamp: 13;
    //overflow: hidden;
  }
  .quntuanbox1 {
    width: 100%;
    image {
      width: 100%;
      height: 30rpx;
    }
  }
  .quntuanDetailPage {
    width: 100%;
    background-color: rgba(248, 248, 249, 1);
    .quntuanDetailPage-swiper {
      width: 100%;
      height: 500rpx;
      .uni-padding-wrap {
        height: 100%;
      }
      .page-section-spacing {
        height: 100%;
      }
      .swiper {
        height: 100%;
        .swiper-item {
          width: 100%;
          height: 100%;
          ._item-img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .quntuanDetailPage-main-radius {
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
    }
    .quntuanDetailPage-main {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      margin-top: 10rpx;
      background-color: #fff;
      .quntuanDetailPage-main-header {
        height: 80rpx;
        text-align: center;
        color: rgba(0, 198, 87, 1);
        font-weight: 600;
        line-height: 80rpx;
        border-bottom: 1px solid #eeeeee;
        ._header-text {
          border-bottom: 8rpx solid rgba(0, 198, 87, 1);
          padding-bottom: 10rpx;
        }
      }
      .quntuanDetailPage-main-box {
        width: 100%;
        .quntuanDetailPage-main-box-title {
          font-size: 36rpx;
          color: #333;
          font-weight: 600;
          // border-left: 6rpx solid #0071fc;
          // padding-left: 10rpx;
          ._title-badge {
            color: rgba(240, 65, 68, 1);
          }

          ._logo {
            width: 60rpx;
            height: 60rpx;
            margin: 0 30rpx 0 20rpx;
            vertical-align: middle;
          }
        }
        .quntuanDetailPage-main-box-logoBox {
          width: 100%;
          height: 160rpx;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          margin-top: 30rpx;
          .quntuanDetailPage-main-box-logoBox-item {
            width: 160rpx;
            height: 160rpx;
            ._logo {
              width: 100%;
              height: 100%;
            }
          }
        }
        .quntuanDetailPage-main-box-win {
          width: 100%;
          padding: 20rpx;
          margin-bottom: 80rpx;
          box-sizing: border-box;
          .quntuanDetailPage-main-box-win-box {
            width: 100%;
            // padding: 20rpx;
            box-sizing: border-box;
            // box-shadow: 0px 9rpx 21rpx 3rpx rgba(99, 99, 99, 0.23);
            // border-radius: 10rpx;
          }
        }
        .quntuanDetailPage-main-box-detail {
          font-size: 26rpx;
          color: #8f8f94;
          text-indent: 2em;
          line-height: 48rpx;
        }
        .quntuanDetailPage-main-box-info {
          margin-top: 30rpx;
          display: flex;
          flex-wrap: nowrap;
          justify-content: flex-start;
          font-size: 26rpx;
          color: #8f8f94;
          padding-left: 16rpx;
          box-sizing: border-box;
          .quntuanDetailPage-main-box-info-label {
            width: 92rpx;
          }
          .quntuanDetailPage-main-box-info-val {
            width: calc(100% - 120rpx);
          }
        }
        .btnlist {
          display: flex;
          flex-direction: row;
          position: fixed;
          bottom: 150rpx;
          left: 0;
          width: 100%;
          .wantAdd {
            width: 100%;
            margin: 0 20rpx;
            height: 80rpx;
            border-radius: 10rpx;
            border: 1px solid #007aff;
            background-color: #007aff;
            font-size: 30rpx;
            text-align: center;
            line-height: 80rpx;
            color: #ffffff;
            margin-top: 30rpx;
          }
        }
      }
    }
  }
</style>
